<template>
	<view>
		<!-- 顶部导航 -->
	<!-- 	<fa-navbar title="我的优惠券" :border-bottom="false"></fa-navbar> -->
		<view class="">
<!-- 			<u-tabs :list="list" 
			:show-bar="false"
			:activeColor="theme.bgColor" :bar-width="barwidth" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
			<view class="title_box">
			    <view @click="clickItem(item)" v-for="(item, i) in list" :key="i" style="margin-left: 30rpx;">
			        <view style="position: relative;display: flex;">
			            <view class="dian" v-if="handleitem==item.value"></view>
			            <view :class="item.value==handleitem?'yname':'noname'">{{item.name}}</view>
			        </view>
			    </view>
			</view>
			<view class="coupon-list">
				<view class="item u-flex" :class="handleitem==1?'':'invalidBg'" v-for="(item, index) in couponList" :key="index">
					
						<view class="left">
							<view class="title">满{{item.coupon.result_data.money}}减{{item.coupon.result_data.number}}</view>
							<view class="time">使用期限:{{item.coupon.use_times_text}}</view>
						</view>
						<view class="right">
							<view v-if="current==1" @click="goPage('/pages/coupon/detail?id='+item.coupon_id)">
								<view>立即</view>
								<view>使用</view>
							</view>
							<view v-if="current==2" class="invalid">已使用</view>
							<view v-if="current==4" class="invalid">已过期</view>
						</view>
					
				</view>
			</view>
		</view>
		<!-- 空数据 -->		
		<view class="u-flex u-row-center fa-emmpty top-15" v-if="!couponList.length">
			<image src="https://huboshizb.bigchun.com/uploads/20220912/ad3fb8608c63b4f0d65b0c70f994b67f.png" mode=""></image>
			<view class="u-tips-color">
				没有更多的数据了~
			</view>
		</view>
		<!-- 加载更多 -->
		<view class="u-p-b-30" v-if="couponList.length"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
export default {
	onLoad() {
		this.getCouponList();
	},
	onShow() {
		if(!this.vuex_token && this.is_first){
			uni.$u.route({
				type:'back'
			})
		}
		this.is_first = true;
	},
	data() {
		return {
			is_first:false,
			barwidth: 50,
			handleitem:1,
			list: [
				{
					name: '未使用',
					value: 1
				},
				{
					name: '已使用',
					value: 2
				},
				{
					name: '已过期',
					value: 4
				}
			],
			current: 1,
			is_update: false,
			status: 'loadmore',
			has_more: false,
			scrollTop: 0,
			page:1,
			couponList: [
			]
		};
	},
	methods: {
		clickItem(val) {
		    console.log("111", val)
		    this.handleitem = val.value
			this.current = val.value;
			this.is_update = true;
			this.getCouponList();
		},
		change(index) {
			this.barwidth = this.$util.strlen(this.list[index].name) * 30;
			this.current = index;
			this.is_update = true;
			this.getCouponList();
		},
		getCouponList() {
			let data = {
				page: this.page
			}
			if([1,2].includes(this.current)){
				data.is_used = this.current;
			}else if(this.current == 4){
				data.expire_time = 1;
			}
			this.$api.myCouponList(data).then(res => {
				if (res.code == 1) {
					if (this.is_update) {
						this.is_update = false;
						this.couponList = [];
					}
					this.couponList = [...this.couponList, ...res.data.data];
					this.has_more = res.data.current_page < res.data.last_page;
				}
			});
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page++;
			this.getCouponList();
		}
	},
	
};
</script>

<style>
page {
	background: #f4f6f8;
}
   .title_box {
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }

    .dian {
        background-size: 100% 100%;
        width: 35rpx;
        height: 35rpx;
        background-image: url('/static/image/fenxiao26.png');
        position: absolute;
      	 top: -5px;
        left: -7px;
    }

    .noname {
        font-size: 30rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      	 z-index: 9;
        // width: 100rpx;
    }
    
    .yname {
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
        // position: absolute;
        // width: 100rpx;
        left: 20rpx;
        top: 0rpx;
        z-index: 9;
    }
</style>
<style lang="scss" scoped>
.coupon-list {
	padding: 30rpx;
	 .invalidBg{
		 background-image: url(https://huboshizb.bigchun.com/uploads/20220920/dee48502397586c115eebab6f3bd56c8.png)!important;		 
	 }
	.item {
		background-image: url(https://huboshizb.bigchun.com/uploads/20220920/1dfe625e407d5c83c507f6b2f8d2faeb.png);
		background-position: center;
		background-size: cover;
		border-radius: 10px;
		margin: 10px;
		margin-bottom: 20px;
		display: flex;
		height: 161rpx;
		width: 689rpx;
		.left{
			flex: 2;
			display: flex;
			flex-direction: column;
			padding: 20px;
			.title{
				color: #FFFFFF;
				font-size: 48rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 80rpx;
			}
			.time{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #3E0D09;
				line-height: 40rpx;
			}
		}
		.right{
			flex: 1;
			display: flex;
			flex-direction: column;
			width: 15vw;
			height: 88rpx;
			font-size: 42rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FFD200;
			text-align: center;
			align-items: center;
			justify-content: center;
		}
		.invalid{
			color: #383838!important;
		}
	}
}
</style>
